<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="type + '分类'"
      width="45%"
      :before-close="handleClose"
      class="dialogStyle"
    >
      <el-form
        :inline="true"
        ref="formRef"
        label-width="100"
        :rules="rules"
        :model="state"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="12"
            ><el-form-item label="分类名称" prop="typeName">
              <el-input v-model="state.typeName" placeholder="回显" />
            </el-form-item>
          </el-col>
  <!--				<el-col :span="12">
            <el-form-item label="上级类别">
              <el-select v-model="state.parentId" placeholder="">
                <el-option
                  :label="v.typeName"
                  :value="v.projectTypeId"
                  v-for="v in projectTypeList"
                  :key="v.projectTypeId"
                />
              </el-select>
            </el-form-item>
          </el-col>-->
          <el-col :span="24">
            <el-form-item label="备注说明">
              <el-input
                v-model="state.remark"
                type="textarea"
                placeholder="回显"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="启用状态">
              <el-switch v-model="state.status" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序">
              <el-input v-model.number="state.typeOrder" placeholder="回显" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose" class="button_cancel2">取消</el-button>
          <el-button @click="submitHandel" class="button_view"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { ElDialog, ElRow, ElCol, ElSwitch, ElMessage } from "element-plus";
import { notificationApi } from "@/api/investment.js";

const props = defineProps({
	type: {
		type: String,
		default: "",
	},
});
const projectTypeList = ref([]);

const rules = {
	typeName: [{ required: true, message: "项目类型不能为空", trigger: "blur" }],
};

const state = ref({});
const dialogVisible = ref(false);

const emits = defineEmits(["getPage"]);
const handleClose = () => {
	dialogVisible.value = false;
	state.value = {};
};
const formRef = ref(null);

const submitHandel = () => {
	state.value.status = state.value.status ? 1 : -1;

	formRef.value.validate((valid, fields) => {
		if (valid) {
			if (props.type == "新建") {
				notificationApi.publicTypeCreate(state.value).then((res) => {
					if ((res.code = 200)) {
						ElMessage.success("操作成功");
						handleClose();
						emits("getPage");
					}
				});
			} else {
				notificationApi.publicTypeUpdate(state.value).then((res) => {
					if ((res.code = 200)) {
						ElMessage.success("操作成功");
						handleClose();
						emits("getPage");
					}
				});
			}
		}
	});
};

const getByIdProjectType = (id) => {
	notificationApi.getByIdProjectType(id).then((res) => {
		if (res.code == 200) {
			state.value = res.data;
			state.value.status = res.data.status == 1 ? true : false;
			console.log(state.value);
		}
	});
};
const getProjectTypeVo = () => {
	notificationApi.getProjectTypeVo().then((res) => {
		if ((res.code = 200)) {
			projectTypeList.value = res.data;
		}
	});
};
const open = (id) => {
	dialogVisible.value = true;
	if (id) {
		getByIdProjectType(id);
	}
};

onMounted(() => {
	getProjectTypeVo();
});

defineExpose({
	open,
});
</script>
<style lang="scss" scoped>
@import '@/views/constructionProjectManage/static/dialog.scss';
.el-form-item,
.el-select {
	width: 100%;
}
</style>
